<template>
    <div class="app-container">
        <el-row>
            <el-form :model="authenticationForm" ref="authenticationForm" :rules="rules">
                <el-form-item label="证书名称" prop="authenticationname">
                    <el-input class="plainInput" v-model="authenticationForm.authenticationname" :maxlength="100"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" prop="paorderno">
                    <el-input class="plainInput" type="number" v-model="authenticationForm.paorderno" :maxlength="9"></el-input>
                </el-form-item>
                <el-form-item label="证书照片" class="is-required">
                    <div class="qulificationImg">
                        <el-upload class="avatar-uploader" 
                            :action="uploadUrl" :show-file-list="false" 
                            :on-success="handleAuthenticationSuccess" 
                            :before-upload="beforeAuthenticationUpload">
                            <img v-if="authenticationForm.imageURL" :src="authenticationForm.imageURL" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>                        
                    </div>
                </el-form-item>
                <el-form-item class="imgTips">图片大小限制为2M,类型支持jpeg、png格式</el-form-item>
                <el-form-item>
                    <div class="btn">
                        <el-button @click="saveAuthentication()"><icon-svg icon-class="baocun1"></icon-svg>&nbsp;&nbsp;保存</el-button>
                        <el-button @click="cancel"><icon-svg icon-class="quxiao"></icon-svg>&nbsp;&nbsp;取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<style scoped>
.plainInput {
    width: 250px;
}

.qulificationImg {
    margin-left: 75px;
    width: 256px;
    height: 180px;
    border: 1px dashed #d9d9d9;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 250px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 250px;
    height: 178px;
    display: block;
}

.btn {
    margin-left: 90px;
}

.imgTips {
   margin-top: -20px; 
   margin-left: 67px;
   color: #bfcbd9;
}

</style>

<script>
import { saveAuthenticationInfo  } from 'api/authentication';
import { validateFakeno } from 'utils/validate';
import Cookies from 'js-cookie';

export default {
    data() {
        // 效验防伪码数量
        const checkOrderNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('排序编号不能为0'));
            }
            if (!validateFakeno(value)) {
                callback(new Error('允许数值范围为:1~99999999'));
            } else {
                callback();
            }
        };
        return {
           authenticationForm: {
                authenticationname: '',
                paorderno: 0,
                imageURL: '',
            },
            rules: {
                authenticationname: [{ required: true, message: '请输入证书名称', trigger: 'blur' },
                { max: 100, message: '长度最大为100个字符', trigger: 'blur' }],
                paorderno: [{ required: true, message: '请输入排序编号', trigger: 'blur' },
                { validator: checkOrderNumber, trigger: 'blur' }]
            },
            uploadUrl: '/trc-service-product/production/fileservice/upload?operatorid=' + Cookies.get('uid') + '&lastlogincode=' + Cookies.get('lastlogincode')
        }
    },
    created() {
        
    },
    methods: {
        saveAuthentication() {
            let requestParams = {
                authenticationname: this.authenticationForm.authenticationname || '',
                paorderno: this.authenticationForm.paorderno || '',
                imageURL: this.authenticationForm.imageURL || ''
            };
            this.$refs['authenticationForm'].validate(valid => {
                if (valid) {
                    if (!requestParams.imageURL) {
                        this.$message({
                            showClose: true,
                            message: '证书照片不能为空',
                            type: 'error'
                        });
                        return;
                    };
                    saveAuthenticationInfo(requestParams).then(response => {
                        let res = response.data;
                        if (res.flag === 1) {
                            this.$message({
                                showClose: true,
                                message: '证书新增成功',
                                type: 'success'
                            });
                            this.$router.go(-1)
                        } else {
                            this.$message({
                                showClose: true,
                                message: '证书新增失败',
                                type: 'error'
                            });
                        }
                    });
                }
            });
        },
        cancel() {
            this.$router.go(-1)
        },
        handleAuthenticationSuccess(res, file) {
            if (res.flag === 1) {
                this.authenticationForm.imageURL = res.data[0];
            } else {
                console.log(res.message);
            }
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAuthenticationUpload(file) {
            const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') ;
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传图片只能是jpeg、png格式');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过2MB');
            }
            return isJPG && isLt2M;
        }
    }
};
</script>